<template>
  <xy-page>
    <el-form label-width="220px" :model="formData">
      <el-form-item label="AppID(应用ID)">
        <el-col :span=12>
          <el-input v-model="formData.appId" :disabled="true"></el-input>
        </el-col>
        <el-col :span=12>
          <el-button class="copy" type="primary" v-clipboard:copy="formData.appId" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
        </el-col>
      </el-form-item>
      <el-form-item label="AppSecret(应用秘钥)">
        <el-col :span=12>
          <el-input v-model="formData.appSecret" :disabled="true"></el-input>
        </el-col>
        <el-col :span=12>
          <el-button class="copy" type="primary" v-clipboard:copy="formData.appSecret" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
        </el-col>
      </el-form-item>
      <div class="titles">客户端第三方鉴权登录</div>
      <el-form-item label="鉴权URL">
        <el-col :span=12>
          <el-input v-model="formData.thirdUrl" placeholder="最长30个字符" clearable></el-input>
        </el-col>
        <el-col :span=12>
          <el-button class="mgl20 copy" type="primary" @click="test">测试</el-button>
          <span v-show="testStatus" :class="testStatus == 1 ? 'testSuccess':'testError'">{{testMessage}}</span>
        </el-col>
      </el-form-item>
      <el-form-item style="color: #999;">
        <el-col :span=12>
<pre>
  <!-- 第三方鉴权Url格式如: 
  http://u.ccb.com/api/login.do?user=${username}&passwd=${password}
  其中, ${username} ${password} 为固定写法不需要修改, 分别对应用户名和密码
  返回报文数据格式为: json
  ##成功返回格式如:
  {
    code: 200,
    message: "验证成功",
    data: null,
    success: true
  }
  ##错误返回格式如:
  {
    code: -1,
    message: "验证失败", // 失败message会显示到客户端
    data: null,
    success: false
  } -->
第三方鉴权Url格式以及返回数据规则如下: 
http://u.ccb.com/api/login.do?user=${username}&passwd=${password}
其中, ${username} ${password}为固定写法不需要修改, 分别对应用户名和密码
请求方式：GET
请求头：application/x-www-form-urlencoded
例子如下(此例子只作测试接口使用，不作设置接口使用):
http://openapi-ccab-dev.videocc.net/api/ccb/polyv/loginTest.do?userName=linxs@ccb.com&password=666666
返回报文数据格式为: json
**成功返回格式如:**
{
	code: 200,
	message: "验证成功",
	data: null,
	success: true
}
**错误返回格式如:**
{
	code: -1,
	message: "验证失败", // 失败message会显示到客户端
	data: null,
	success: false
}
</pre>
        </el-col>
      </el-form-item>
      <div class="titles">回调设置</div>
      <el-form-item label="设置直播状态回调通知URL:">
        <el-col :span=12>
          <el-input v-model="statusUrl" maxlength="60" clearable>
            <template slot="prepend">
              <el-select v-model="statusOption" class="w100">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option>
              </el-select>
            </template>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="设置录制回调通知URL:">
        <el-col :span=12>
          <el-input v-model="videoUrl" maxlength="60" clearable>
            <template slot="prepend">
              <el-select v-model="videoOption" class="w100">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option>
              </el-select>
            </template>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="设置转存成功回调通知URL:">
        <el-col :span=12>
          <el-input v-model="storeUrl" maxlength="60" clearable>
            <template slot="prepend">
              <el-select v-model="storeOption" class="w100">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option>
              </el-select>
            </template>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="设置统计日志入库回调通知URL:">
        <el-col :span=12>
          <el-input v-model="logsStoreUrl" maxlength="60" clearable>
            <template slot="prepend">
              <el-select v-model="logsOption" class="w100">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option>
              </el-select>
            </template>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button @click="save" type="primary" :loading="isSaving">保存</el-button>
      </el-form-item>
    </el-form>
  </xy-page>
</template>
<script>
export default {
  data() {
    const option = 'https://'
    const options = [{
      value: 'https://',
      label: 'https://'
    },{
      value: 'http://',
      label: 'http://'
    }]
    return {
      isSaving:false,
      submitUrl:'',
      statusUrl:'',
      statusOption:option,
      options: options,
      videoUrl:'',
      videoOption:option,
      logsStoreUrl:'',
      storeOption:option,
      storeUrl:'',
      logsOption:option,
      devAppId:'',
      formData: {
        appId: '',
        appSecret: '',
        thirdUrl:''
      },
      testStatus: 0, // 测试状态: 0 未测试  1 成功  2 失败
      testMessage: ''
    };
  },
  methods:{
    onCopy(){
      this.$message.success('复制成功')
    },
    onError(){
      this.$message.error('复制失败')
    },
    getData(){
      this.$postStream('/admin/instance/ccb/polyv/app/getDevSetting.do',{
        data:{
          appId:this.devAppId
        },
        success:(res)=>{
          if(res.success){
            this.formData=res.object
          }else{
            this.$message.error('获取设置失败')
          }
        },
        error:()=>{
          this.$message.error('获取设置失败')
        }
      })
    },
    test(){
      if(!this.formData.thirdUrl){
        this.$message.error('鉴权Url不能为空')
        return
      }else if(!this.$utils.isUrl(this.formData.thirdUrl)){
        this.$message.error('鉴权URL格式错误')
        return
      }
      if(this.formData.thirdUrl.indexOf('${username}') != -1 || this.formData.thirdUrl.indexOf('${password}') != -1){
        this.$message.error('请将鉴权url中的${username}和${password}替换成测试参数')
        return
      }
      this.$postStream('/admin/instance/ccb/polyv/adminUser/channel/thirdLoginCheck.do', {
        data: {
          appId: this.devAppId,
          url: this.formData.thirdUrl
        },
        success: res => {
          this.testMessage = res.message
          if(res.success){
            this.testStatus = 1// 测试状态: 0 未测试  1 成功  2 失败
          }else{
            if(res.code == 50001){
              this.$message.error(res.message)
            }else{
              this.testStatus = 2
            }
          }
        }
      })
    },
    save(){
      if(this.formData.thirdUrl &&　!this.$utils.isHttp(this.formData.thirdUrl)){
        this.$message.error('鉴权URL格式错误')
        return
      }
      this.isSaving = true
      this.$postStream('/admin/instance/ccb/polyv/app/setDevSetting.do', {
        data: {
          appId: this.devAppId,
          thirdUrl: this.formData.thirdUrl
        },
        success: res => {
          if(res.success){
            //设置直播状态回调通知URL
            this.$postStream('/admin/instance/ccb/polyv/chloudLearn/setStreamCallback.do',{
              data:{
                appId:this.devAppId,
                url:this.statusUrl?this.statusOption+this.statusUrl:''
              },
              success:(res)=>{
                if(res.success){
                    //设置录制回调通知URL
                    this.$postStream('/admin/instance/ccb/polyv/chloudLearn/setRecordCallback.do',{
                      data:{
                        appId:this.devAppId,
                        url:this.videoUrl?this.videoOption+this.videoUrl:''
                      },
                      success:(res)=>{
                        if(res.success){
                          //设置转存成功回调通知URL
                          this.$postStream('/admin/instance/ccb/polyv/chloudLearn/setPlaybackCallback.do',{
                            data:{
                              appId:this.devAppId,
                              url:this.storeUrl?this.storeOption+this.storeUrl:''
                            },
                            success:(res)=>{
                              if(res.success){
                                //观看日志入库回调通知url
                                this.$postStream('/admin/instance/ccb/polyv/chloudLearn/setViewLog.do',{
                                  data:{
                                    url:this.logsStoreUrl?this.logsOption+this.logsStoreUrl:'',
                                    appId:this.devAppId
                                  },
                                  success:(res)=>{
                                    if(res.success){
                                      this.$message.success('保存成功')
                                      this.isSaving = false
                                    }else{
                                      this.$message.success('观看日志入库回调通知url保存失败')
                                      this.isSaving = false
                                    }
                                  },
                                  error:()=>{
                                    this.$message.success('观看日志入库回调通知url保存失败')
                                    this.isSaving = false
                                  }
                                })
                              }else{
                                this.$message.error('转存成功回调通知URL保存失败')
                                this.isSaving = false
                              }
                            },
                            error:()=>{
                              this.$message.error('转存成功回调通知URL保存失败')
                              this.isSaving = false
                            }
                          })
                        }else{
                          this.$message.error('录制回调通知URL保存失败')
                          this.isSaving = false
                        }
                      },
                      error:()=>{
                        this.$message.error('录制回调通知URL保存失败')
                        this.isSaving = false
                      }
                    })
                }else{
                  this.$message.error('直播状态回调通知URL保存失败')
                  this.isSaving = false
                }
              },
              error:()=>{
                this.$message.error('直播状态回调通知URL保存失败')
                this.isSaving = false
              }
            })

          }else{
            if(res.code == 50001){
              this.$message.error(res.message)
            }else{
              this.$message.error('鉴权URL保存失败')
              this.isSaving = false
            }
          }
        },
        error: () => {
          this.$message.error('鉴权URL保存失败')
          this.isSaving = false
        }
      })
    },
    getUrl(){
      this.$postStream('/admin/instance/ccb/polyv/app/getCallbackURL.do',{
        data:{
          appId:this.devAppId
        },
        success:(res)=>{
          if(res.success){
            this.statusUrl = !res.object.streamCallbackUrl?'':res.object.streamCallbackUrl.split('://')[1]
            this.videoUrl = !res.object.recordCallbackUrl?'':res.object.recordCallbackUrl.split('://')[1]
            this.storeUrl = !res.object.playbackCallbackUrl?'':res.object.playbackCallbackUrl.split('://')[1]
            this.logsStoreUrl = !res.object.playbackCallbackUrl?'':res.object.viewlogCallbackUrl.split('://')[1]
          }else{
            this.$message.error('回调设置URL获取失败')
          }
        },
        error:()=>{
          this.$message.error('回调设置URL获取失败')
        }
      })
    }
  },
  
  mounted(){
    this.devAppId = this.$route.query.devAppId
    if(!this.devAppId){
      this.devAppId = sessionStorage.getItem('curAccountAppId')
    }
    this.getData()
    this.getUrl()
  }
};
</script>
<style lang="scss" scoped>
.titles{
  display: block;
  height: 40px;
  line-height: 40px;
  &::before{
    content: ' ';
    width: 5px;
    height: 30px;
    background: #409EFF;
    display: inline-block;
    vertical-align: top;
    margin: 5px 10px;
  }
}
.testSuccess{
  color: #61C09F;
}
.testError{
  color: #FA5555;
}
.copy{
  margin: 3px 20px;
  height: 34px;
}
</style>
